<template>
  <div class="DimensionSelectTree-page">
    <!-- 搜索区域 -->
    <SelfAdaption>
      <Form
        :model="searchForm"
        ref="searchForm"
        slot="adaption-bar"
        label-position="top"
        class="ivu-form-no-margin-bottom"
        inline
      >
        <!-- 树名称 -->
        <Form-item prop="treeName" :label="$t('module.treeManage.treeName')">
          <Input
            type="text"
            :maxlength="50"
            v-model.trim="searchForm.treeName"
            :placeholder="$t('module.treeManage.warning.enterTreeName')"
            @on-enter="search"
          ></Input>
        </Form-item>
        <!-- 树编码 -->
        <Form-item prop="treeCode" :label="$t('module.treeManage.treeCode')">
          <Input
            type="text"
            :maxlength="50"
            v-model.trim="searchForm.treeCode"
            :placeholder="$t('module.treeManage.warning.enterTreeCode')"
            @on-enter="search"
          ></Input>
        </Form-item>

        <!-- 查询\重置按钮 -->
        <Form-item prop="button" class="search-solt-btn">  
          <RPButton optType="search" @click="search" />
          <RPButton optType="reset" @click="reset" />
        </Form-item>
      </Form>
    </SelfAdaption>
    <InnerPageTable ref="treeTable" :config="pageTableConfig"> 
      <!--
      <div slot="handle-bar">
        <RPButton optType="search" @click="search" />
        <RPButton optType="reset" @click="reset" />
      </div>
      -->
    </InnerPageTable>
  </div>
</template>
<script>
import tenantAPI from "@/api/tenantApi.js";
import valueSetAPI from "@/api/valueSetAPI.js";
import { CoreModuleName } from "@/const.js";
import locales from "./locales.js";

export default {
  mixins: [locales],

  components: {},
  props: {},
  name: "dimension-select-tree",
  props: {
    productId: {
      type: String,
      default: ""
    },
    tenantCode: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      treeTypeList: {},
      productList: {},
      tenantList: {},
      searchForm: {
        productCode: "",
        tenantCode: "",
        treeName: "",
        treeCode: "",
        enabled: 1//只取有效树
      },
      pageTableConfig: {
        action: null,
        resource: null, //default
        customDataProcess: null, //default
        loadDataFn: this.loadData,
        columnsFn: this.generateColumns,
        autoFirst: false, //default false
        highlightRow: true
      }
    };
  },
  computed: {},
  created: function() {
    this.$emit("SetTitle", this.$t("module.dimension.selectTree"));
    this.$emit("SetPageWidth", 866);
    this.$emit("SetPageActions", [
      {
        text: "确定",
        theme: "primary",
        handle: this.confirm
      },
      {
        text: this.$t("common.close"),
        handle: () => {
          this.$emit("Close");
        }
      }
    ]);
    this.init();
    
  },
  beforeMount: function() {},
  mounted: function() {
    this.search(1);
  },
  beforeDestroy: function() {},
  destroyed: function() {},
  methods: {
    init() {
      this.initTreeType();
      this.initProduct();
      this.initTenant();

      this.searchForm.productCode = this.productId;
      this.searchForm.tenantCode = this.tenantCode;
    },
    initTreeType() {
      valueSetAPI.getValueSetByCode("treeType").then(data => {
        for (const treeType of data) {
          this.treeTypeList[treeType.vsiKey] = treeType.vsiValue;
        }
      });
    },
    // 初始化所属产品
    initProduct() {
      valueSetAPI.getValueSetByCode("RC_PRODUCT").then(data => {
        for (const product of data) {
          this.productList[product.vsiKey] = product.vsiValue;
        }
      });
    },
    // 初始化所属租户
    initTenant() {
      tenantAPI.queryTenantList().then(data => {
        for (const tenant of data) {
          this.tenantList[tenant.tenantCode] = tenant.tenantName;
        }
      });
    },
    search(page) {
      this.$refs["treeTable"].load(this.searchForm, page);
    },
    reset() {
      this.$refs["searchForm"].resetFields();
      this.search(1);
    },
    loadData({ responseProcess, param }) {
      return window.$http
        .post(`${window.RPConfig.mgt}/tree/list/page`, param)
        .then(response => response.data)
        .then(res => responseProcess(res));
    },
    generateColumns() {
      return [
        {
          title: this.$t("module.treeManage.treeName"),
          key: "treeName",
          align: "left"
        },
        {
          title: this.$t("module.treeManage.treeCode"),
          key: "treeCode",
          align: "left",
        },
        {
          title: this.$t("module.treeManage.treeType"),
          key: "treeType",
          align: "left",
          render: (h, params) => {
            return h(
              "div",
              {
                attrs: {
                  class: "ivu-table-cell ivu-table-cell-ellipsis",
                  title: this.treeTypeList[params.row.treeType]
                }
              },
              this.treeTypeList[params.row.treeType] ? this.treeTypeList[params.row.treeType] : params.row.treeType
            );
          }
        },
        // {
        //   title: this.$t("module.treeManage.productCode"),
        //   key: "productCode",
        //   align: "left",
        //   // width: 120,
        //   render: (h, params) => {
        //     return h(
        //       "div",
        //       {
        //         attrs: {
        //           class: "ivu-table-cell ivu-table-cell-ellipsis",
        //           title: this.productList[params.row.productCode]
        //         }
        //       },
        //       this.productList[params.row.productCode]
        //         ? this.productList[params.row.productCode]
        //         : params.row.productCode
        //     );
        //   }
        // },
        // {
        //   title: this.$t("module.treeManage.tenantCode"),
        //   key: "tenantCode",
        //   align: "left",
        //   width: 120,
        //   render: (h, params) => {
        //     return h(
        //       "div",
        //       {
        //         attrs: {
        //           class: "ivu-table-cell ivu-table-cell-ellipsis",
        //           title: this.tenantList[params.row.tenantCode]
        //         }
        //       },
        //       this.tenantList[params.row.tenantCode] ? this.tenantList[params.row.tenantCode] : params.row.tenantCode
        //     );
        //   }
        // }
      ];
    },
    confirm() {
      let row = this.$refs["treeTable"].getHighlightRow();
      this.$emit("Close", row);
    }
  },
  watch: {},
  directives: {}
};
</script>
<style lang="less">
.ivu-form.form-create .ivu-form-item {
  min-height: 50px;
  margin-bottom: 0;
}
// ok统一注释的样式
.DimensionSelectTree-page {
//   .run-search-bar>div:last-child {
//     margin-top: 10px!important;
//   }
  .self-adaption-wrap{
    margin: 0 -10px;
  }
  .single-table-con{
    padding: 0;
    .table-bar{
      display: none;
    }
  }
}
</style>

